<template>
	<u-tabbar
	  @change="onChange"
	  activeColor="rgb(0 161 252)"
	  :zIndex="99999"
	  :value="index"
	  :placeholder="false"
	  :fixed="true"
	>
	  <u-tabbar-item text="首页" icon="home" :name="0"></u-tabbar-item>
	  <u-tabbar-item text="菜单" icon="grid" :name="1"></u-tabbar-item>
	  <u-tabbar-item text="统计" icon="file-text" :name="2"></u-tabbar-item>
	  <u-tabbar-item text="消息" icon="bell" :name="3"></u-tabbar-item>
	  <u-tabbar-item text="我的" icon="account" :name="4"></u-tabbar-item>
	</u-tabbar>
  </template>
  
  <script setup lang="ts">
  import { defineOptions } from 'vue'
  
  // 定义组件名称
  defineOptions({
	name: 'VolTabbar'
  })
  
  // Props定义
  interface Props {
	index?: number
  }
  
  const props = withDefaults(defineProps<Props>(), {
	index: 0
  })
  
  // 页面路由列表
  const pageList = [
	'/pages/home/home',
	'/pages/menu/menu',
	'/pages/form/form',
	'/pages/message/message',
	'/pages/user/user'
  ] as const
  
  // 切换标签页
  const onChange = (nameIndex: number) => {
	uni.switchTab({
	  url: pageList[nameIndex]
	})
  }
  </script>
  
  <style scoped>
  /* 样式保持不变 */
  </style>